<div class="container">

    <div class="col-md-12">
        <input id="search-box" placeholder="Search for a library" type="text" class="form-control col-md-7 search" aria-controls="example">
        <div class="text-right text-muted">Realtime search by <a href="http://www.algolia.com/?utm_source=cdnjs&amp;utm_medium=link&amp;utm_campaign=cdnjs_search"><img src="/img/algolia64x20.png" style="height: 20px; width:64px" /></a></div>
    </div>
</div>
<div class="container">
  <div class="col-md-12">
    <div>
      <div class="packages-table-container">

        <table style="margin-top: 10px;" cellpadding="0" cellspacing="0" border="0" class="table table-striped" id="example">
          <thead>
            <tr>
              <th>Library</th>
              <th>Link</th>
            </tr>
          </thead>
          <tbody>
            {{#packages}}
              <tr itemscope itemtype="http://schema.org/SoftwareApplication" data-library-name="{{name}}" data-library-keywords="{{keywords}}" id="{{id}}" class="odd gradeX normal">
                <td style="white-space: nowrap;">
                  <a itemprop="name" href="/libraries/{{name}}">
                    {{name}}
                  </a>
                  <meta itemprop="url" content="{{homepage}}" />
                  <meta itemprop="version" content="{{version}}" />
                  <!-- hidden text for searching -->
                  <div style="display: none;">
                    {{keywords}}
                  </div>
                </td>
                <td style="padding: 0; width: 100%;">
                  <div style="position: relative; padding: 8px;" data-lib-name="{{name}}" class="library-column {{fileType}}-type">
                    <p itemprop="downloadUrl" class="library-url" style="padding: 0; margin: 0">https://cdnjs.cloudflare.com/ajax/libs/{{originalName}}/{{version}}/{{filename}}</p>
                  </div>
                </td>
              </tr>
              {{/packages}}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<div style="clear: both;"></div>
</div>
<style>
.authenticated tr.normal:hover .change-favorite:before {
  content:"+" !important;
}
.authenticated tr.favorite:hover .change-favorite:before {
  content:"-" !important;
}
.authenticated tr.favorite td {
  background-color: #fcf8e3 !important;
}
</style>
